<template>
	<view class="container">
		<scroll-view ref="scrollView" class="scroll-view" :scroll-y="true" :scroll-top="scrollTop"
			@scrolltolower="handleScrollToLower" scroll-with-animation>
			<view class="comment-list">
				<view v-for="item in commitList" :key="item.id" class="commit-item">
					<view class="commit-item-top">
						<view class="item-top-left">
							<view class="user-info">
								<image :src="item.avatar" mode=""></image>
								<view class="user-name">
									<view class="name-text">
										{{item.userName}}
									</view>
								</view>
							</view>
							<view class="commit-content-text">
								{{item.content}}
							</view>
						</view>
						<image v-if="item.form == 'card'" @click="handleOpenCardSingle(item.objectId)"
							class="card-image" :src="item.cardImage" mode=""></image>
					</view>
					<view class="commit-origin" v-if="item.form == 'group'"
						@click="handleOpenGroupDetail(item.objectId, item.groupName)">
						<view class="origin-text">
							评论来自卡组
						</view>
						<image class="orgin-avatar" :src="item.groupImage" mode=""></image>
						<view class="origin-title">
							{{item.groupName}}
						</view>
					</view>
					<view class="view-info">
						<view class="view-count">
							{{item.createtime}}
						</view>
						<view class="zan-count">
							<image @click="handleClickZan(item, false)" v-if="item.isZan" class="title-icon"
								src="https://static-tool.77.top/static/zan.png" alt="" />
							<image @click="handleClickZan(item, true)" v-else class="title-icon"
								src="https://static-tool.77.top/static/zan-not.png" alt="" />
							<text class="title-text">{{item.zan}}点赞</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		computed
	} from 'vue';
	import request from "/http/index.js"
	const props = defineProps({
		commitList: {
			type: Array,
			default: []
		},
		more: {
			type: Boolean,
			default: true
		}
	})

	const emits = defineEmits(['initData', 'refresh'])
	const interval = 3000; // 自动切换间隔时间

	const scrollTop = ref(0);
	const items = ref([]);

	// Simulate loading more data
	const loadMoreData = async () => {
		if (!props.more) {
			// No more data, scroll to the top
			scrollTop.value = 0;
			// Optionally trigger a refresh or any other action here
		} else {
			await emits('initData')
		}
	};

	const handleScrollToLower = () => {
		loadMoreData();
	};

	// Auto scroll function
	const autoScroll = () => {
		setInterval(() => {
			if (scrollTop.value < 400) {
				scrollTop.value += 200;
				//  uni.scrollTo({
				//    scrollTop: 200, // 向下滚动 200px
				//    duration: 300
				// })
			} else {
				loadMoreData();
			}
		}, interval);
	};

	const handleClickZan = (item, flag) => {
		// item.isZan = flag
		request({
			url: 'api/deck/comment_zan',
			method: 'POST',
			data: {
				comment_id: item.id
			}
		}).then((res) => {
		     // emits('refresh')
			 if(res.code == 1){
				 item.zan++
			 }else{
			     uni.showToast({
			     	title:res.msg || '操作失败！',
					icon:'none'
			     })
			 }
		})
	}
	// 跳转到卡牌详情
	const handleOpenCardSingle = (id) => {
		uni.navigateTo({
			url: `/homePackages/card-detail-sigle?id=${id}`
		})
	}
	// 跳转到卡组
	const handleOpenGroupDetail = (id, groupName) => {
		uni.navigateTo({
			url: `/homePackages/cardGroupDetail?id=${id}&name=${groupName}`
		})
	}
	onMounted(() => {
		autoScroll();
	});
</script>

<style scoped lang="scss">
	.container {
		height: 400px;
		overflow: hidden;
	}

	.scroll-view {
		height: 100%;
		padding: 24rpx;
		box-sizing: border-box;
		scroll-behavior: smooth;

		.comment-list {
			.commit-item {
				margin-top: 32rpx;

				.card-image {
					width: 85rpx;
					height: 120rpx;
					margin-left: 22rpx;
					border-radius: 8rpx;
				}

				.commit-item-top {
					display: flex;
					align-items: flex-end;

					.item-top-left {
						flex: 1;
					}
				}

				.user-info {
					display: flex;

					image {
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
					}

					.user-name {
						margin-left: 8rpx;

						.name-text {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 24rpx;
							color: #2E3033;
						}

						.create-time {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 22rpx;
							color: #7B7D80;
							margin-top: 12rpx;
						}
					}
				}

				.commit-content-text {
					margin-top: 14rpx;
					font-family: PingFang SC, PingFang SC;
					// font-weight: 500;
					font-size: 30rpx;
					color: #47494D;
					line-height: 40rpx;
					text-align: left;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
					overflow: hidden;
				}

				.commit-origin {
					display: flex;
					align-items: center;
					height: 56rpx;
					background: #F7F8FA;
					border-radius: 16rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #2E3033;
					text-align: left;
					padding: 16rpx;
					box-sizing: border-box;
					margin-top: 14px;

					.orgin-avatar {
						width: 32rpx;
						height: 32rpx;
						border-radius: 8rpx;
						margin-right: 8rpx;
					}

					.origin-text {
						&::after {
							display: inline-block;
							content: '';
							width: 1rpx;
							height: 16rpx;
							background-color: #AEB0B3;
							margin: 0 8rpx;
						}

					}

					.origin-title {
						flex: 1;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}
				}

				.view-info {
					margin-top: 8rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					image {
						width: 48rpx;
						height: 48rpx;
					}

					.view-count {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #7B7D80;

					}

					.zan-count {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 20rpx;
						color: #47494D;
						line-height: 23rpx;
						display: flex;
						align-items: center;
					}
				}
			}


		}
	}
</style>